<template>
  <div class="factoryOrder">
    <!-- 筛选 -->
    <el-container class="screening-box">
      <el-form :inline="true" :model="searchData" class="form" ref="form" :rules="rules" label-position="right" label-width="140px">
        <el-header class="screening-head">
          <div class="title">
            <i class="el-icon-search el-icon--left"></i>筛选查询
          </div>
          <div>
            <span class="toggle" v-show="showScreening" @click="showScreening = !showScreening">
              <i class="el-icon-arrow-up el-icon--left"></i>收起筛选
            </span>
            <span class="toggle" v-show="!showScreening" @click="showScreening = !showScreening">
              <i class="el-icon-arrow-down el-icon--left"></i>展开筛选
            </span>
            <el-button type="primary" class="tlwok-btn" @click="onSubmitForm('form', searchFunc)">查 询</el-button>
            <el-button type="primary" class="tlwok-btn" plain @click="onResetForm('form')">重置</el-button>
          </div>
        </el-header>
        <el-main class="screening-body" v-show="showScreening">
          <el-form-item label="京东订单号：" prop="jdOrderId">
            <el-input v-model.number="searchData.jdOrderId" maxlength="30" size="small" placeholder="请输入京东订单号"></el-input>
          </el-form-item>
          <el-form-item label="收货人姓名：" prop="jdReciverName">
            <el-input size="small" v-model.number="searchData.jdReciverName" maxlength="11" placeholder="请输入收货人姓名"></el-input>
          </el-form-item>
          <el-form-item label="下单时间：" prop="orderTime">
            <el-date-picker v-model="searchData.orderTime" size="small" type="daterange" format="yyyy-MM-dd" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right"></el-date-picker>
          </el-form-item>
          <el-form-item label="采购单号：" prop="purchaseId">
            <el-input size="small" v-model="searchData.purchaseId" placeholder="请输入采购单号"></el-input>
          </el-form-item>
          <el-form-item label="下单账户（京东）：" prop="jdBuyerName">
            <el-input size="small" v-model="searchData.jdBuyerName" placeholder="请输入买家名(京东下单账号)"></el-input>
          </el-form-item>
          <el-form-item label="完成时间：" prop="finishTime">
            <el-date-picker v-model="searchData.finishTime" type="daterange" size="small" format="yyyy-MM-dd" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right"></el-date-picker>
          </el-form-item>
          <el-form-item label="服务商用户名：" prop="serverName">
            <el-input v-model.number="searchData.serverName" maxlength="30" size="small" placeholder="请输入服务商用户名"></el-input>
          </el-form-item>
          <el-form-item label="服务商公司名称：" prop="serverCompanyName">
            <el-input v-model.number="searchData.serverCompanyName" maxlength="30" size="small" placeholder="请输入服务商公司名称"></el-input>
          </el-form-item>
          <el-form-item label="回款状态：" prop="payState">
            <el-select size="small" v-model="searchData.payState" placeholder="请选择">
              <el-option v-for="status in collectionStatusList" :key="status.code" :label="status.desc" :value="status.code">{{status.desc}}</el-option>
            </el-select>
          </el-form-item>
        </el-main>
      </el-form>
    </el-container>

    <!-- tableBox -->
    <div class="tableList">
      <div class="statusBox">
        <div class="statusBtn" v-for="item in typeList" :key="item.value" :class="item.active ? 'statusActive' : ''" @click="filterList(item)">
          <span>{{ item.desc }}</span>
          （
          <span class="count">{{ item.number }}</span>）
        </div>
      </div>
      <!-- table -->
      <div class="tableBox">
        <div class="title">
          <div class="left">
            <div class="titleImg">
              <img class="icon" src="@/assets/old/image/list1.png" alt />
              京东厂直订单
            </div>
            <el-button size="small" type="primary" class="el-icon-s-tools" @click="rateSystem">商品服务费率管理</el-button>
          </div>
          <div class="btnArea">
            <el-upload class="mr20" :show-file-list="false" :on-success="uploadSuccess" :action="uploadExcel.url" :name="uploadExcel.name" accept=".xls, .xlsx">
              <el-button size="small" type="primary">导入商品单位</el-button>
            </el-upload>
            <div class="downloadFile" @click="downloadFile()">下载模板</div>
            <el-button size="small" type="primary" @click="exportExcel()">导出所选订单</el-button>
            <el-button size="small" type="primary" @click="bulkDistribute()">批量分配</el-button>
            <el-button size="small" type="primary" @click="bulkOutStock()">批量出库</el-button>
          </div>
        </div>

        <el-table ref="multipleTable" :data="limitTableData" style="width: 100%" @selection-change="handleSelectionChange" border :span-method="arraySpanMethod" class="orderListTable" :header-cell-style="tableHeaderColor">
          <el-table-column type="selection" align="center" width="40"></el-table-column>
          <el-table-column label="商品信息" width="360">
            <template slot-scope="scope">
              <template v-if="scope.$index % 2 === 0">
                <span class="orderInfo">订单号：{{ scope.row.jdOrderId }}</span>
                <span class="orderInfo">下单时间：{{ scope.row.orderTime | timeFilter }}</span>
                <span v-if="scope.row.orderDistributionTime" class="orderInfo">分配时间：{{ scope.row.orderDistributionTime | timeFilter }}</span>
                <span v-if="scope.row.orderFinishTime" class="orderInfo">完成时间：{{ scope.row.orderFinishTime | timeFilter }}</span>
              </template>
              <template v-else>
                <ul>
                  <li v-for="orderItem in scope.row.jdPtradeOrderItems.slice(0, 3)" :key="orderItem.id" class="productItem">
                    <img :src="orderItem.skuUrl" class="image" />
                    <div>
                      <p class="productName">{{ orderItem.skuName }}</p>
                      <div class="productInfo">
                        <span>SKU：{{ orderItem.skuId }}</span>
                        <span>数量：{{ orderItem.num }}</span>
                        <span>采购单价：{{ orderItem.purchasePrice }}</span>
                      </div>
                    </div>
                  </li>
                </ul>
                <p class="moreProduct" v-if="scope.row.jdPtradeOrderItems && scope.row.jdPtradeOrderItems.length > 3">更多信息查看详情</p>
              </template>
            </template>
          </el-table-column>
          <el-table-column align="center" label="金额（元）" width="100">
            <template slot-scope="scope">
              <template v-if="scope.$index % 2 === 0">
                <div class="operateBox">
                  <p class="itemBtn" @click="lookDetail(scope.row)">查看详情</p>
                  <p v-if="scope.row.state<60&&scope.row.serverUserId" class="itemBtn" @click="relatedBtn(scope.row.jdOrderId,scope.row.id)">关联报备</p>
                  <p v-if="scope.row.state==10" class="itemBtn" @click="distributeOrder(scope.row.jdOrderId,scope.row.id)">分配订单</p>
                  <p v-if="scope.row.state==20&&scope.row.serverUserId" class="itemBtn" @click="cancelBtn(scope.row.jdOrderId,scope.row.id)">取消分配</p>
                  <p v-if="scope.row.state==20&&scope.row.serverUserId" class="itemBtn" @click="stockBtn(scope.row.jdOrderId,scope.row.id)">出库</p>
                  <p v-if="scope.row.state>=30&&scope.row.state<60&&scope.row.payState==1" class="itemBtn" @click="collectionBtn(scope.row.jdOrderId,scope.row.id)">采购人已回款</p>
                  <template v-if="scope.row.payState==2&&scope.row.state<60 && !scope.row.advancePayState">
                    <p v-if="scope.row.siConfirmation==1&&scope.row.purchaseContractUrl!=null&&scope.row.incomeUrl!=null" class="itemBtn" @click="paymentBtn(scope.row.jdOrderId,scope.row.id)">付款</p>
                    <p v-else class="itemBtn" style="color:grey;cursor:no-drop;">付款</p>
                  </template>
                </div>
              </template>
              <template v-else>
                <div class="infosItem">
                  订单金额：
                  <br />
                  {{ scope.row.orderPrice }}
                </div>
                <div class="infosItem">
                  采购金额：
                  <br />
                  {{ scope.row.purchasePrice }}
                </div>
              </template>
            </template>
          </el-table-column>
          <el-table-column label="收货信息">
            <template slot-scope="scope">
              <div>下单账号：{{ scope.row.jdBuyerName }}</div>
              <div>收货人：{{ scope.row.jdReciverName }}</div>
              <div>收货地址：{{ scope.row.detailAddress }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="state" align="center" label="订单状态" width="80">
            <template slot-scope="scope">
              <span class="orderStatus" :class="{'finished':scope.row.state==50}">{{scope.row.state==70?'取消':(orderStatusList[scope.row.state]||'')}}</span>
              <div v-if="scope.row.state==70">{{scope.row.cancelTime | timeFilter}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="state" align="center" label="回款状态" width="100">
            <template slot-scope="scope">
              <span class="orderStatus" :class="{'finished':scope.row.payState==4||scope.row.payState==5}">{{scope.row.payState | collectionStatusFilter}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="advancePayState" align="center" label="提前回款状态" width="100">
            <template slot-scope="scope">
              <span class="orderStatus" :class="{'finished':scope.row.advancePayState==2}">{{scope.row.advancePayState == 1 ? '秒回已申请' : scope.row.advancePayState == 2 ? '秒回已通过' : '-'}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="address" align="center" label="承运信息">
            <template slot-scope="scope">
              {{ scope.row.logisticsCompany }}
              <br />
              {{ scope.row.logisticsNo }}
            </template>
          </el-table-column>
          <el-table-column prop="address" align="center" label="服务商">
            <template slot-scope="scope">
              <template v-if="scope.row.state==10||scope.row.state==70">
                <span class="orderStatus">未分配</span>
              </template>
              <template v-else>
                <div class="infosItem">
                  用户名：
                  <br />
                  {{scope.row.serverName}}
                </div>
                <div class="infosItem">
                  公司名称：
                  <br />
                  {{scope.row.serverCompanyName}}
                </div>
              </template>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="100"></el-table-column>
        </el-table>
        <div class="table-handler">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchData.pageNum" :page-sizes="pageSizeArr" :page-size="searchData.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalSize"></el-pagination>
        </div>
      </div>

      <!-- 详情 -->
      <el-dialog title="订单详情" :visible.sync="operation.details" width="1080px" :close-on-click-modal="false" :close-on-press-escape="false">
        <div class="detailBox">
          <el-steps :active="stepActive" align-center>
            <el-step v-for="(item,i) in orderStepInfo" :key="i" :title="item.desc" :description="item.time"></el-step>
          </el-steps>
          <ul class="orderInfo">
            <li class="item">
              <div class="group">
                <label>订单状态：</label>
                <span :class="details.state==50?'success':'warning'">{{orderStatusList[details.state]||''}}</span>
              </div>
              <div class="group">
                <label>京东订单号：</label>
                <span>{{details.jdOrderId}}</span>
              </div>
              <div class="group">
                <label>报备编号：</label>
                <div class="numList">
                  <template v-if="details.state!=70">
                    <p v-for="(item,i) in details.relationFilingIds" :key="i" v-show="details.relationFilingIds&&details.relationFilingIds.length>0">
                      {{item}}
                      <em class="lookThis" @click="lookThisOrder(item)">查看</em>
                    </p>
                  </template>
                  <template v-else>
                    <p class="warning">未关联</p>
                  </template>
                </div>
              </div>
            </li>
            <li class="item">
              客户备注：
              <span>{{details.buyerMemo}}</span>
            </li>
            <li class="item">
              商家备注：
              <span>{{details.serverMemo}}</span>
            </li>
          </ul>

          <!-- 新增合同上传及生成si回款 -->
          <div class="createInvoice">
            <div class="left">
              <div class="group">
                <label for>合同：</label>
                <span v-if="purchaseContractUrl" class="lastRate" style="cursor:pointer" @click="serverDownload(1)">下载</span>
                <span v-else class="warning">服务商未上传</span>
              </div>
              <div class="group">
                <label for>发票：</label>
                <span v-if="incomeUrl" class="lastRate" style="cursor:pointer" @click="serverDownload(2)">下载</span>
                <span v-else class="warning">服务商未上传</span>
              </div>
              <div class="group">
                <label for>电子回单：</label>
                <template v-if="details.existReceipt">
                  <span class="lastRate" style="cursor:pointer" @click="receiptDetail(details.orderId)">查看</span>
                  <span class="lastRate" style="cursor:pointer" @click="receiptDownload(details.orderId)">下载</span>
                </template>
                <span v-else class="grey">暂无信息</span>
              </div>
            </div>
            <template v-if="details.paymentInfoVO.siConfirmation==0">
              <el-button size="small" :disabled="!isCreateSi" class="createSiBtn" type="primary" @click="createSI">{{isCreateSi?createSIPrice:'重新生成'}}</el-button>
            </template>
            <template v-else>
              <el-button size="small" :disabled="true" class="createSiBtn" type="primary">重新生成</el-button>
            </template>
          </div>

          <el-table tooltip-effect="dark" style="width: 100%" :data="details.jdPtradeOrderItems" border class="detailTable" @cell-dblclick="tableDblclick" :row-class-name="tableRowClassName">
            <el-table-column prop="skuId" align="center" label="商品编号" width="130"></el-table-column>
            <el-table-column prop="skuName" align="center" label="商品名称" :show-overflow-tooltip="true" width></el-table-column>
            <el-table-column prop="num" align="center" label="商品数量" width="80"></el-table-column>
            <el-table-column prop="skuUnit" align="center" label="单位" width="50">
              <template slot-scope="scope">
                <span v-if="scope.row.index === tabClickIndex">
                  <el-input v-model="scope.row.skuUnit" size="mini" class="skuUnitInput" @blur="skuUnitInputBlur" />
                </span>
                <span v-else>{{ scope.row.skuUnit }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="京东价" width="100">
              <template slot-scope="scope">
                <span>¥</span>
                {{scope.row.jdPrice}}
              </template>
            </el-table-column>
            <el-table-column align="center" label="采购价" width="100">
              <template slot-scope="scope">
                <span>¥</span>
                {{scope.row.purchasePrice}}
              </template>
            </el-table-column>
            <el-table-column prop="purchaseId" align="center" label="采购单号" width="120"></el-table-column>
            <el-table-column align="center" label="实时总费率">
              <template slot-scope="scope">
                <span class="lastRate" v-if="scope.row.lastRate">{{scope.row.lastRate}}%</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="已确认总费率" width="100">
              <template slot-scope="scope">
                <span v-if="scope.row.totalRate" class="warning">{{scope.row.totalRate}}%</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="回款SI金额">
              <template slot-scope="scope">
                <p v-if="scope.row.siCollectionAmount" class="warning">
                  <span>¥</span>
                  {{scope.row.siCollectionAmount}}
                </p>
              </template>
            </el-table-column>
          </el-table>

          <div class="information">
            <div class="item">
              <div class="title">收货人信息</div>
              <ul class="infoBox">
                <li class="infoItem">
                  <p class="name">下单账号：</p>
                  <p class="text" id="accountText">{{details.reciverInfoVO.jdBuyerName}}</p>
                  <i v-if="details.reciverInfoVO.jdBuyerName" aria-label="icon: copy" class="anticon-copy" @click="copyText('accountText')">
                    <svg viewBox="64 64 896 896" focusable="false" class data-icon="copy" width="1em" height="1em" fill="#298df8" aria-hidden="true">
                      <path d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z" />
                    </svg>
                  </i>
                </li>
                <li class="infoItem">
                  <p class="name">收货人姓名：</p>
                  <p class="text" id="receiverText">{{details.reciverInfoVO.jdReciverName}}</p>
                  <i v-if="details.reciverInfoVO.jdReciverName" aria-label="icon: copy" class="anticon-copy" @click="copyText('receiverText')">
                    <svg viewBox="64 64 896 896" focusable="false" class data-icon="copy" width="1em" height="1em" fill="#298df8" aria-hidden="true">
                      <path d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z" />
                    </svg>
                  </i>
                </li>
                <li class="infoItem">
                  <p class="name">收货地址：</p>
                  <p class="text" id="addressText">{{details.reciverInfoVO.detailAddress}}</p>
                  <i v-if="details.reciverInfoVO.detailAddress" aria-label="icon: copy" class="anticon-copy" @click="copyText('addressText')">
                    <svg viewBox="64 64 896 896" focusable="false" class data-icon="copy" width="1em" height="1em" fill="#298df8" aria-hidden="true">
                      <path d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z" />
                    </svg>
                  </i>
                </li>
                <li class="infoItem">
                  <p class="name">手机号码：</p>
                  <p class="text" id="phoneText">{{details.reciverInfoVO.mobile}}</p>
                  <i v-if="details.reciverInfoVO.mobile" aria-label="icon: copy" class="anticon-copy" @click="copyText('phoneText')">
                    <svg viewBox="64 64 896 896" focusable="false" class data-icon="copy" width="1em" height="1em" fill="#298df8" aria-hidden="true">
                      <path d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z" />
                    </svg>
                  </i>
                </li>
                <li class="infoItem">
                  <p class="name">电子邮件：</p>
                  <p class="text" id="emailText">{{details.reciverInfoVO.email}}</p>
                  <i v-if="details.reciverInfoVO.email" aria-label="icon: copy" class="anticon-copy" @click="copyText('emailText')">
                    <svg viewBox="64 64 896 896" focusable="false" class data-icon="copy" width="1em" height="1em" fill="#298df8" aria-hidden="true">
                      <path d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z" />
                    </svg>
                  </i>
                </li>
              </ul>
            </div>
            <div class="item paymentInfo">
              <div class="title">付款信息</div>
              <ul class="infoBox">
                <li class="infoItem">
                  <p class="name">付款类型：</p>
                  <p class="text">{{details.paymentInfoVO.paymentType}}</p>
                </li>
                <li class="infoItem">
                  <p class="name">付款时间：</p>
                  <p class="text">{{details.paymentInfoVO.paymentTime}}</p>
                </li>
                <li class="infoItem">
                  <p class="name">订单金额：</p>
                  <p class="text">
                    <span v-if="details.paymentInfoVO.orderPrice">¥</span>
                    {{details.paymentInfoVO.orderPrice}}
                  </p>
                </li>
                <li class="infoItem">
                  <p class="name">运费金额：</p>
                  <p class="text">
                    <span v-if="details.paymentInfoVO.freight">¥</span>
                    {{details.paymentInfoVO.freight}}
                  </p>
                </li>
                <li class="infoItem">
                  <p class="name">优惠金额：</p>
                  <p class="text">
                    <span v-if="details.paymentInfoVO.totalDiscount">¥</span>
                    {{details.paymentInfoVO.totalDiscount}}
                  </p>
                </li>
                <li class="infoItem">
                  <p class="name">支付金额：</p>
                  <p class="text">
                    <span v-if="details.paymentInfoVO.paymentPrice">¥</span>
                    {{details.paymentInfoVO.paymentPrice}}
                  </p>
                </li>
                <li class="infoItem">
                  <p class="name">回款SI总金额：</p>
                  <p class="text" v-if="details.paymentInfoVO.siCollectionAmount">
                    <span>¥</span>
                    {{details.paymentInfoVO.siCollectionAmount}}
                    <span :class="details.paymentInfoVO.siConfirmation?'success':'warning'">{{details.paymentInfoVO.siConfirmation?'（服务商已确认）':'（服务商未确认）'}}</span>
                  </p>
                </li>
              </ul>
            </div>
            <div class="item">
              <div class="title">配送信息</div>
              <template v-if="details.state!=70">
                <div class="logistic">
                  <p>
                    承运商：
                    <span>{{details.distributionInfoVO.logisticsCompany}}</span>
                  </p>
                  <p>
                    运单号：
                    <span>{{details.distributionInfoVO.logisticsNo}}</span>
                  </p>
                </div>
                <div class="logisticInfo">
                  <el-timeline v-if="details.distributionInfoVO.logiusticDetailInfo">
                    <el-timeline-item v-for="(activity, index) in details.distributionInfoVO.logiusticDetailInfo" :key="index" :timestamp="activity.time" :color="activity.color">{{activity.context}}</el-timeline-item>
                  </el-timeline>
                  <div class="emptyLogs" v-else>
                    <el-timeline>
                      <el-timeline-item v-for="(item,i) in activities" :key="i" :timestamp="item.timestamp" :color="item.color">{{item.context}}</el-timeline-item>
                    </el-timeline>
                  </div>
                </div>
              </template>
              <template v-else>
                <div class="emptyLogs">
                  <el-timeline>
                    <el-timeline-item v-for="(item,i) in activities" :key="i" :timestamp="item.timestamp" :color="item.color">{{item.context}}</el-timeline-item>
                  </el-timeline>
                </div>
              </template>
            </div>
          </div>
        </div>
      </el-dialog>

      <!-- 分配订单 -->
      <el-dialog :title="bulkHandleObj.inOperation?'批量分配订单':('分配订单 （订单号：' + jdOrderId + '）')" :visible.sync="operation.distributeOrder" width="60%" :close-on-click-modal="false" :close-on-press-escape="false" :before-close="clearClose">
        <div class="distributeOrderBox">
          <el-form :inline="true" :model="distribute.search" class="orderForm" ref="form" :rules="rules" label-position="right" label-width="140px">
            <div class="group">
              <el-form-item label="服务商用户名：" prop>
                <el-input v-model="distribute.search.serviceName" maxlength="30" size="small" placeholder="请输入服务商用户名"></el-input>
              </el-form-item>
              <el-form-item label="公司名称：" prop>
                <el-input v-model="distribute.search.company" maxlength="30" size="small" placeholder="请输入公司名称"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" class="searchBtn" size="small" @click="onSubmitForm('form',queryResultInfo)">查询结果</el-button>
              </el-form-item>
            </div>
            <div class="group">
              <el-form-item label="服务商手机号：" prop>
                <el-input v-model="distribute.search.serviceMobile" maxlength="30" size="small" placeholder="请输入服务商手机号"></el-input>
              </el-form-item>
              <el-form-item label="用户编号：" prop>
                <el-input v-model="distribute.search.userId" maxlength="30" size="small" placeholder="请输入用户编号"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" class="searchBtn resetBtn" size="small" @click="resetQuery">重置</el-button>
              </el-form-item>
            </div>
          </el-form>
          <el-table :data="distribute.data" tooltip-effect="dark" style="width: 100%" border height="260" highlight-current-row @current-change="currentOrderChange" class="distributeOrderTable">
            <el-table-column prop="checkBox" align="center" label="选择" width="50">
              <template slot-scope="scope">
                <el-radio v-model="distribute.radio" :label="scope.row.id"></el-radio>
              </template>
            </el-table-column>
            <el-table-column prop="userId" align="center" label="用户编号"></el-table-column>
            <el-table-column prop="userName" align="center" label="用户名"></el-table-column>
            <el-table-column prop="oauthPhone" align="center" label="认证手机"></el-table-column>
            <el-table-column prop="companyName" align="center" label="公司名称"></el-table-column>
          </el-table>
          <div class="pageBox">
            <el-pagination @size-change="sizeChange" @current-change="currentChange" :current-page="distribute.pageInfo.pageNum" :page-sizes="distribute.pageInfo.pageArr" :page-size="distribute.pageInfo.pageSzie" layout="total, sizes, prev, pager, next, jumper" :total="distribute.pageInfo.pageTotal"></el-pagination>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="distributeHandle()">分 配</el-button>
          <el-button @click="distributeClose">关 闭</el-button>
        </span>
      </el-dialog>

      <!-- 出库 -->
      <el-dialog title="出库地址" :visible.sync="operation.outStock" width="40%" :close-on-click-modal="false" :close-on-press-escape="false">
        <div class="stockBox">
          <div class="tips">提示：出库地址为默认地址，无需修改直接提交即可！</div>
          <div class="selectBox">
            <label class="addressName">出库地址：</label>
            <el-select class="addressVal" v-model="stockAddress.address" placeholder="请选择" size="small">
              <el-option v-for="(item,i) in stockData" :key="i" :label="item.address" :value="item.addressId"></el-option>
            </el-select>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitStockInfos">提 交</el-button>
          <el-button @click="operation.outStock = false">关 闭</el-button>
        </span>
      </el-dialog>

      <!-- 关联报备 -->
      <el-dialog :title="'关联报备编号 （订单号：' + jdOrderId + '）'" :visible.sync="operation.relatedReport" width="40%" :close-on-click-modal="false" :close-on-press-escape="false" :before-close="clearClose">
        <div class="reportBox">
          <el-form ref="relatedOrderForm">
            <div class="form-item" v-if="relatedOrderlist.length>0">
              <el-form-item v-for="(order, index) in relatedOrderlist" :key="index" :class="{'is-error':!!order.errorMsg}">
                <!-- :rules="[{required: true, message: '订单号不能为空', trigger: 'blur'},{type:'number', message: '订单号为数字', trigger: 'change'}]" -->
                <div class="el-step__icon is-text">
                  <div class="el-step__icon-inner">{{index+1}}</div>
                </div>
                <template v-if="order.edit">
                  <el-input size="small" v-model.number="order.orderId" placeholder="请输入报备编号"></el-input>
                  <el-button size="small" type="primary" @click.prevent="saveOrder(order)">保存</el-button>
                </template>
                <template v-if="!order.edit">
                  <div class="el-input">{{order.orderId}}</div>
                  <el-button size="small" type="primary" @click.prevent="editOrder(order)">编辑</el-button>
                </template>
                <el-button size="small" type="primary" plain @click.prevent="removeOrder(order,index)">删除</el-button>
                <el-button size="small" type="primary" plain @click.prevent="lookThisOrder(order.orderId)">查看报备单</el-button>
                <!-- <div class="el-form-item__error" v-show="order.edit">{{order.errorMsg}}</div> -->
              </el-form-item>
            </div>
            <el-form-item class="lastItem" v-if="showAddBtn">
              <div @click="addOrder" class="add-related-order" icon="el-icon-plus">+ 增加报备编号</div>
              <!-- <el-button @click="addOrder" class="add-related-order" icon="el-icon-plus">增加报备编号</el-button> -->
            </el-form-item>
          </el-form>
        </div>
      </el-dialog>

      <!-- 取消分配 -->
      <el-dialog title="取消分配" :visible.sync="operation.unassign" width="40%" :close-on-click-modal="false" :close-on-press-escape="false">
        <span class="unassignBox">
          是否取消订单号
          <span>{{jdOrderId}}</span> 的分配？取消后可重新进行分配
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="isSureCancel">确定取消</el-button>
          <el-button @click="operation.unassign = false">关 闭</el-button>
        </span>
      </el-dialog>

      <!-- 付款 -->
      <el-dialog title="付款" :visible.sync="operation.payment" width="950px" :close-on-click-modal="false" :close-on-press-escape="false" class="paymentDialog">
        <div class="title">商品清单：</div>
        <el-table :data="paymentDataList.jdPtradeOrderItems" border style="width: 100%" max-height="250">
          <el-table-column align="center" prop="skuId" label="商品编码" width="80"></el-table-column>
          <el-table-column header-align="center" prop="skuName" label="商品名称" width></el-table-column>
          <el-table-column align="center" prop="skuUnit" label="单位" width="80"></el-table-column>
          <el-table-column align="center" prop="num" label="数量" width="100"></el-table-column>
          <el-table-column align="center" label="京东价" width="120">
            <template slot-scope="scope">
              <span>￥{{scope.row.jdPrice}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="确认服务费率" width="120">
            <template slot-scope="scope">
              <span class="red">{{scope.row.totalRate}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="回款SI金额" width="120">
            <template slot-scope="scope">
              <span class="red">￥{{scope.row.siCollectionAmount}}</span>
            </template>
          </el-table-column>
        </el-table>
        <div class="infos">
          <div class="item">
            支付金额（京东）：
            <span class="red">￥{{details.paymentInfoVO.paymentPrice}}</span>
          </div>
          <div class="item">
            回款SI总金额：
            <span class="red">￥{{details.paymentInfoVO.siCollectionAmount}}</span>
          </div>
        </div>
        <div class="title">支付方式：</div>
        <div class="paymentType">
          <div class="item" :class="paymentData.paymentType==0&&'active'" @click="paymentData.paymentType=0">在线支付</div>
          <div class="item" :class="paymentData.paymentType==1&&'active'" @click="paymentData.paymentType=1">线下支付</div>
        </div>
        <div slot="footer" class="dialog-footer">
          <div class="amount">
            应付金额：
            <span class="red">￥{{details.paymentInfoVO.siCollectionAmount}}</span>
          </div>
          <el-button type="danger" @click="submitPaymentType(paymentDataList.id)">提 交</el-button>
        </div>
      </el-dialog>
      <!-- 申请付款提示 -->
      <el-dialog :show-close="false" center :visible.sync="operation.applyPayment" width="600px" class="applyPaymentDialog">
        <div class="flex-row">
          <i class="icon el-icon-success"></i>
          <div class="info">
            <template v-if="paymentData.paymentType==1">
              线下支付成功，支付状态将改为
              <span class="green">已付款（线下支付）</span>
            </template>
            <template v-else>线上支付请求已提交，请财务在后台进行付款</template>
          </div>
        </div>
        <div class="flex-row">
          <span>订单号：{{paymentDataList.jdOrderId}}</span>
          <span class="red">应付金额：￥{{details.paymentInfoVO.siCollectionAmount}}元</span>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="danger" @click="clearWindow">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 采购人已回款 -->
      <el-dialog :visible.sync="collection.show" title="采购人已回款">
        <el-form label-width="9em">
          <el-form-item label="供应商应付款日期">
            <el-date-picker
              v-model="collection.formData.payTime"
              type="datetime"
              placeholder="选择日期时间"
              align="right"
            >
            </el-date-picker>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="collection.show = false">取 消</el-button>
          <el-button type="primary" @click="collectionSubmit" :loading="collection.loading">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import dict from '@/lib/dict.js'
export default {
  data () {
    const typeListFun = function () {
      const typeList = [{ desc: '全部报备', code: '' }, ...dict.statusListC3]
      typeList.map(item => {
        item.number = 0
        item.active = false
      })
      return typeList
    }
    return {
      radio7: '',
      showScreening: true, // 筛选是否折叠
      platformList: [],
      rules: {},
      multipleArr: [],
      operation: {
        details: false, // 详情
        distributeOrder: false, // 分配订单
        outStock: false, // 出库
        relatedReport: false, // 关联报备
        unassign: false, // 取消分配
        payment: false, // 付款
        applyPayment: false, // 付款
      },
      stockAddress: {
        address: '',
      }, // 出库地址
      stockData: [], // 出库地址数据
      // 筛选的
      searchData: {
        jdOrderId: '',
        jdReciverName: '',
        orderTime: [],
        purchaseId: '',
        jdBuyerName: '',
        finishTime: [],
        state: '',
        serverName: '',
        serverCompanyName: '',
        pageNum: 1, // 页码
        pageSize: 5, // 每页条数
        payState: '', // 回款状态
      },
      typeList: typeListFun(),
      orderData: [],
      currentPage: 1,
      currentSize: 5,
      pageSizeArr: [5, 10, 20, 30, 40],
      totalSize: 0, // 厂直订单总条数
      orderStatusList: {
        10: '待分配',
        20: '等待出库',
        30: '等待发货',
        40: '等待确认收货',
        50: '完成',
        60: '删除',
        70: '取消',
      },
      collectionStatusList: [
        { code: '', desc: '全部状态' },
        { code: 1, desc: '采购人未回款' },
        { code: 2, desc: '采购人已回款' },
        { code: 3, desc: '申请线上付款中' },
        { code: 4, desc: '已付款(线下支付)' },
        { code: 5, desc: '已付款' },
        { code: 6, desc: '删除' },
      ],
      // 分配订单
      distribute: {
        search: {
          serviceName: '',
          serviceMobile: '',
          company: '',
          userId: '',
        },
        data: [],
        radio: null,
        currentRow: null,
        pageInfo: {
          pageTotal: 1,
          pageSize: 10,
          pageNum: 1,
          pageArr: [10, 20, 30, 40, 50],
        },
      },
      // 详情进度数据
      orderStepInfo: [
        { code: 1, desc: '提交订单', time: '' },
        { code: 2, desc: '分配服务商', time: '' },
        { code: 3, desc: '商品出库', time: '' },
        { code: 4, desc: '商品发货', time: '' },
        { code: 5, desc: '完成', time: '' },
      ], // 订单进度
      details: {
        // 顶部运单信息
        jdpTradeOrderStateVO: {
          orderTime: '', // 提交订单时间
          orderDistributionTime: '', // 分配服务商时间
          outStockTime: '', // 商品出库时间
          deliveryTime: '', // 商品发货时间
          orderFinishTime: '',
        },
        // 收货人信息
        reciverInfoVO: {
          jdBuyerName: '', // 京东买家名
          jdReciverName: '', // 京东收货人名
          detailAddress: '',
          mobile: '',
          email: '',
        },
        // 付款信息
        paymentInfoVO: {
          paymentType: 1, // 支付类型
          paymentTime: '', //
          orderPrice: '', // 订单金额
          purchasePrice: '', // 采购金额
          freight: '',
          totalDiscount: '', // 优惠总金额
          paymentPrice: '', // 实际支付金额
          siCollectionAmount: '',
          siConfirmation: 0, // 是否已回款
        },
        // 配送信息
        distributionInfoVO: {
          logisticsNo: '', // 物流单号
          logisticsCompany: '', // 物流公司
          logisticsCompanyCode: '',
          logiusticDetailInfo: [],
        },
        jdPtradeOrderItems: [],
      },
      // 默认物流信息
      activities: [
        {
          context: '暂无物流信息',
          timestamp: '',
          color: '#ff2525',
        },
      ],
      // 关联报备
      relatedOrderlist: [],
      // 订单主键ID
      relatedId: '',
      // 京东did
      jdOrderId: '',
      // 费率导入
      uploadExcel: {
        url: '/api/manage/order/importUnitsExcel/2',
        name: 'file',
      },
      // si回款
      createSIPrice: '按实时费率，生成回款SI金额',
      isCreateSi: false, // 是否允许点击
      // 付款
      paymentDataList: {},
      paymentData: {
        paymentType: 0,
      },

      // 详情 发票合同
      purchaseContractUrl: '',
      incomeUrl: '',
      downloadId: null,
      tabClickIndex: null,
      bulkHandleObj: {
        // 批量出库、分配订单
        inOperation: false, // 操作中
        ordersArr: [], // 订单
      },
      // 采购人已回款
      collection: {
        show: false,
        loading: false,
        formData: {
          id: '',
          payTime: '',
        },
      },
    }
  },
  computed: {
    limitTableData () {
      const list = this.orderData
      const resultList = []
      if (list) {
        list.map(item => {
          resultList.push({
            id: item.id,
            jdOrderId: item.jdOrderId,
            orderTime: item.orderTime,
            orderDistributionTime: item.orderDistributionTime,
            orderFinishTime: item.orderFinishTime,
            state: item.state,
            mark: true,
            serverUserId: item.serverUserId,
            payState: item.payState,
            siConfirmation: item.siConfirmation,
            siCollectionAmount: item.siCollectionAmount,
            purchaseContractUrl: item.purchaseContractUrl,
            incomeUrl: item.incomeUrl,
          })
          resultList.push(item)
        })
      }
      return resultList
    },
    showAddBtn () {
      return this.relatedOrderlist.length < 5
    },
    stepActive () {
      // 订单状态 10:待分配 20:待出库 30:待发货 40:待收货 50:完成
      let val = 1
      if (this.details.state == 60 || this.details.state == 70) {
        val = 1
      } else {
        val = parseInt(this.details.state / 10)
      }
      return val
    },
  },
  filters: {
    timeFilter (nS) {
      if (!nS) return ''
      var date = new Date(parseInt(nS))
      var year = date.getFullYear()
      var mon = date.getMonth() + 1
      var day = date.getDate()
      var hours = date.getHours()
      var minu = date.getMinutes()
      var sec = date.getSeconds()
      hours < 10 && (hours = '0' + hours)
      minu < 10 && (minu = '0' + minu)
      sec < 10 && (sec = '0' + sec)

      return year + '/' + mon + '/' + day + ' ' + hours + ':' + minu + ':' + sec
    },
    collectionStatusFilter (status) {
      if (!status) return ''
      let result = ''
      const list = [
        { code: '', desc: '全部状态' },
        { code: 1, desc: '采购人未回款' },
        { code: 2, desc: '采购人已回款' },
        { code: 3, desc: '申请线上付款中' },
        { code: 4, desc: '已付款(线下支付)' },
        { code: 5, desc: '已付款' },
        { code: 6, desc: '删除' },
      ]
      for (let index = 0; index < list.length; index++) {
        if (status == list[index].code) {
          result = list[index].desc
          return result
        }
      }
      return result
    },
  },
  watch: {
    multipleArr (val) {
      let i = 0
      if (!val) return
      val.map(item => {
        if (item.mark) {
          i++
        }
      })
      if (i == this.currentSize) {
        this.$nextTick(() => {
          this.limitTableData.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row, true)
          })
        })
      } else if (i === 0) {
        this.$nextTick(() => {
          this.limitTableData.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row, false)
          })
        })
      }
    },
  },
  methods: {
    // 修改table header的背景色
    tableHeaderColor ({ row, column, rowIndex, columnIndex }) {
      return 'background-color: #f5f5f5;color: #333;font-weight: bold;text-align:center'
    },
    /**
     * 厂直订单——列表内勾选项改变
     * @param {val}
     */
    handleSelectionChange (val) {
      this.multipleArr = val
    },
    // 厂直订单——合并单元格
    arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex % 2 === 0) {
          return [2, 1]
        } else {
          return [0, 0]
        }
      }
      if (rowIndex % 2 === 0) {
        if (columnIndex === 1) {
          return [1, 7]
        } else if (columnIndex === 2) {
          return [2, 1]
        } else {
          return [0, 0]
        }
      }
    },
    /**
     * 厂直订单——切换每页显示条数
     */
    handleSizeChange (val) {
      this.searchData.pageSize = val
      this.searchData.pageNum = 1
      this.getOrderList()
    },
    /**
     * 厂直订单——翻页
     */
    handleCurrentChange (val) {
      this.searchData.pageNum = val
      this.getOrderList()
    },
    // 厂直订单——订单状态筛选
    filterList (type) {
      this.typeList.map(item => {
        item.active = false
      })
      type.active = true
      this.searchData.state = type.code
      this.searchData.pageNum = 1
      this.getOrderList()
    },
    /**
     * 厂直订单——筛选查询厂直订单
     */
    searchFunc () {
      this.searchData.pageNum = 1
      this.getOrderList()
    },
    /**
     * 厂直订单——获取列表数据
     */
    getOrderList () {
      if (this.searchData.orderTime.length > 0) {
        this.searchData.orderTimeStart = this.additionalTime(
          this.searchData.orderTime[0],
        )
        this.searchData.orderTimeEnd = this.additionalTime(
          this.searchData.orderTime[1],
          true,
        )
      } else {
        this.searchData.orderTimeStart = null
        this.searchData.orderTimeEnd = null
      }
      if (this.searchData.finishTime.length > 0) {
        this.searchData.orderFinishTimeStart = this.additionalTime(
          this.searchData.finishTime[0],
        )
        this.searchData.orderFinishTimeEnd = this.additionalTime(
          this.searchData.finishTime[1],
          true,
        )
      } else {
        this.searchData.orderFinishTimeStart = null
        this.searchData.orderFinishTimeEnd = null
      }
      const param = {}
      Object.keys(this.searchData).map(item => {
        if (!(item == 'orderTime' || item == 'finishTime')) {
          param[item] = this.searchData[item]
        }
      })
      this.$axios
        .post('/api/manage/order/queryJdpOrderData', param)
        .then(orderListRes => {
          if (orderListRes.success) {
            const _result = orderListRes.result
            this.orderData = _result.jdPtradeOrders
            this.totalSize = _result.total

            this.typeList.map((item, index) => {
              switch (parseInt(item.code)) {
                case 10:
                  item.number = _result.jdpOrderBaseInfoCount.waitDistribute
                  break
                case 20:
                  item.number = _result.jdpOrderBaseInfoCount.waitDelivered
                  break
                case 30:
                  item.number = _result.jdpOrderBaseInfoCount.waitDeliver
                  break
                case 40:
                  item.number = _result.jdpOrderBaseInfoCount.confirmReceipt
                  break
                case 50:
                  item.number = _result.jdpOrderBaseInfoCount.orderFinish
                  break
                case 60:
                  item.number = _result.jdpOrderBaseInfoCount.orderDelete
                  break
                case 70:
                  item.number = _result.jdpOrderBaseInfoCount.orderCancel
                  break
                default:
                  item.number =
                    _result.jdpOrderBaseInfoCount.totalCount -
                      _result.jdpOrderBaseInfoCount.orderCancel || 0
                  break
              }
            })
          } else {
            this.$message.error(orderListRes.desc)
          }
        })
    },
    /**
     * 厂直订单——导出订单
     * @param {}
     */
    exportExcel () {
      const arr = []
      this.multipleArr.map(item => {
        if (item.mark && arr.indexOf(item.id) < 0) {
          arr.push(item.id)
        }
      })
      if (arr.length == 0) {
        this.$message({
          type: 'error',
          message: '您还未选择订单',
        })
        return
      }

      window.location.href =
        window.globalConfig.apiUrl +
        '/api/manage/order/exportJdpOrderExcel?' +
        'exportIds=' +
        encodeURIComponent(JSON.stringify(arr))
    },
    /**
     * 厂直订单——批量分配
     * @param {}
     */
    bulkDistribute () {
      const arr1 = [] // 存储已勾选订单
      const arr2 = [] // 存储可分配订单

      this.multipleArr.map(item => {
        if (item.mark && arr1.indexOf(item.id) < 0) {
          arr1.push(item.id)
          if (item.state == 10) { arr2.push({ id: item.id, jdOrderId: item.jdOrderId }) }
        }
      })

      if (arr1.length < 1) {
        this.$message({
          type: 'error',
          message: '您还未选择订单',
        })
        return
      }
      if (arr2.length < 1) {
        this.$message({
          type: 'error',
          message: '您选择的订单均不可分配',
        })
        return
      }

      this.bulkHandleObj.ordersArr = arr2
      this.bulkHandleObj.inOperation = true
      this.operation.distributeOrder = true

      this.queryResultInfo()
    },

    /**
     * 厂直订单——批量出库
     */
    bulkOutStock () {
      const arr1 = [] // 存储已勾选订单
      const arr2 = [] // 存储可出库订单

      this.multipleArr.map(item => {
        if (item.mark && arr1.indexOf(item.id) < 0) {
          arr1.push(item.id)
          if (item.state == 20 && item.serverUserId) { arr2.push({ id: item.id, jdOrderId: item.jdOrderId }) }
        }
      })

      if (arr1.length < 1) {
        this.$message({
          type: 'error',
          message: '您还未选择订单',
        })
        return
      }
      if (arr2.length < 1) {
        this.$message({
          type: 'error',
          message: '您选择的订单均不可出库',
        })
        return
      }

      this.bulkHandleObj.ordersArr = arr2
      this.bulkHandleObj.inOperation = true

      this.$axios.post('/api/manage/order/getOutStockAddress').then(resp => {
        if (resp.success) {
          this.operation.outStock = true
          this.stockData = resp.result.deliveryAddressQueryResult
          this.stockAddress.address = this.stockData[0].address
        } else {
          this.$message.error(resp.desc)
        }
      })
    },

    // 厂直订单列表操作栏——查看详情
    lookDetail (obj) {
      this.jdOrderId = obj.id
      this.downloadId = obj.jdOrderId
      this.purchaseContractUrl = obj.purchaseContractUrl
      this.incomeUrl = obj.incomeUrl
      this.getDetailData(this.jdOrderId)
    },
    // 查看详情数据
    getDetailData (id) {
      this.$axios
        .post('/api/manage/order/queryJdpOrderDataDetails', { id: id })
        .then(detailRes => {
          if (detailRes.success) {
            this.operation.details = true
            this.details = detailRes.result.jdpTradeOrdersDetailResponse
            this.isCreateSi = this.isExistRate(this.details)
            if (this.details.relationFilingIds) {
              this.details.relationFilingIds = this.details.relationFilingIds.split(
                ',',
              )
            }
            if (this.details.distributionInfoVO.logiusticDetailInfo) {
              this.details.distributionInfoVO.logiusticDetailInfo[0].color =
                '#ff2525'
            }

            this.orderDateFun(this.details.jdpTradeOrderStateVO)
          } else {
            this.$message.error(detailRes.desc)
          }
        })
    },
    /**
     * @name: 判断详情中的list是否都存在实时总费率
     * @param {type}
     * @return: Boolean
     */
    isExistRate (obj) {
      let isTrue = null
      obj.jdPtradeOrderItems.forEach(item => {
        if (item.lastRate) {
          isTrue = true
        } else {
          isTrue = false
          return false
        }
      })
      return isTrue
    },
    // 查看详情 时间戳转化
    orderDateFun (obj) {
      const _this = this
      const arr = Object.values(obj)
      for (let i = 0; i < arr.length; i++) {
        _this.orderStepInfo[i].time = _this.timeFilter(arr[i])
      }
    },
    timeFilter (nS) {
      if (!nS) return ''
      var date = new Date(parseInt(nS))
      var year = date.getFullYear()
      var mon = date.getMonth() + 1
      var day = date.getDate()
      var hours = date.getHours()
      var minu = date.getMinutes()
      var sec = date.getSeconds()
      hours < 10 && (hours = '0' + hours)
      minu < 10 && (minu = '0' + minu)
      sec < 10 && (sec = '0' + sec)

      return year + '/' + mon + '/' + day + ' ' + hours + ':' + minu + ':' + sec
    },
    // 厂直订单列表操作栏——关联报备
    relatedBtn (orderId, id) {
      const _this = this
      _this.operation.relatedReport = true
      _this.jdOrderId = orderId
      _this.relatedId = id
      const param = {
        jdOrderId: orderId,
        id: id,
      }
      _this.$axios
        .post('/api/manage/order/queryRelateDetail', param)
        .then(resp => {
          if (resp.success) {
            if (resp.result) {
              resp.result.split(',').forEach(item => {
                const obj = {
                  orderId: '',
                  edit: false,
                  errorMsg: '',
                }
                obj.orderId = item
                _this.relatedOrderlist.push(obj)
              })
            }
          } else {
            _this.$message.error(resp.desc)
          }
        })
    },
    clearClose (done) {
      this.relatedOrderlist = []
      this.distribute.currentRow = null
      this.distribute.radio = null
      done()
      this.getOrderList()
    },
    // 厂直订单列表操作栏——分配订单
    distributeOrder (orderId, id) {
      this.bulkHandleObj.inOperation = false
      this.operation.distributeOrder = true
      this.jdOrderId = orderId
      this.relatedId = id
      this.queryResultInfo()
    },

    /** 厂直订单列表操作栏——出库
     * @param {orderId}
     */
    stockBtn (orderId, id) {
      this.bulkHandleObj.inOperation = false
      this.jdOrderId = orderId
      this.relatedId = id
      this.$axios
        .post('/api/manage/order/getOutStockAddress', { jdOrderId: orderId })
        .then(resp => {
          if (resp.success) {
            this.operation.outStock = true
            this.stockData = resp.result.deliveryAddressQueryResult
            this.stockAddress.address = this.stockData[0].address
          } else {
            this.$message.error(resp.desc)
          }
        })
    },

    /**
     * 提交选择的出库地址
     * @param {obj}
     */
    submitStockInfos () {
      if (this.bulkHandleObj.inOperation) {
        this.$axios
          .post('/api/manage/order/batchCommitOutStockAddress', {
            outStockAddress: this.stockAddress.address,
            jdOrderIdList: this.bulkHandleObj.ordersArr,
          })
          .then(resp => {
            if (resp.success) {
              this.$message.success('批量出库成功')
              this.bulkHandleObj.inOperation = false
              this.bulkHandleObj.ordersArr = []
              this.operation.outStock = false
              this.getOrderList()
            } else {
              this.$message.error(resp.desc)
            }
          })
      } else {
        this.$axios
          .post('/api/manage/order/commitOutStockAddress', {
            jdOrderId: this.jdOrderId,
            outStockAddress: this.stockAddress.address,
            id: this.relatedId,
          })
          .then(resp => {
            if (resp.success) {
              this.$message.success('出库成功')
              this.operation.outStock = false
              this.getOrderList()
            } else {
              this.$message.error(resp.desc)
            }
          })
      }
    },
    // 厂直订单列表操作栏——取消分配
    cancelBtn (orderId, id) {
      this.jdOrderId = orderId
      this.operation.unassign = true
      this.relatedId = id
    },
    // 厂直订单列表操作栏——采购人已回款
    collectionBtn (orderId, id) {
      this.collection.formData.id = id
      this.collection.formData.payTime = ''
      this.collection.show = true
      // this.$confirm('确认采购人已回款？', '提示', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   type: 'warning',
      // })
      //   .then(() => {
      //     this.$axios.post(`/api/manage/order/moneyBack/${id}`).then(resp => {
      //       if (resp.success) {
      //         this.$message.success(resp.result.desc)
      //         this.getOrderList()
      //       } else {
      //         this.$message.error(resp.desc)
      //       }
      //     })
      //   })
      //   .catch(() => {})
    },
    collectionSubmit () {
      if (!this.collection.formData.payTime) {
        this.$message.error('请选择供应商应付款日期')
      } else {
        this.collection.loading = true
        this.$axios.post(`/api/manage/order/moneyBack/${this.collection.formData.id}/${new Date(this.collection.formData.payTime).getTime()}`).then(resp => {
          if (resp.success) {
            this.$message.success(resp.result.desc)
            this.getOrderList()
            this.collection.show = false
          } else {
            this.$message.error(resp.desc)
          }
          this.collection.loading = false
        }).catch(() => {
          this.collection.loading = false
        })
      }
    },
    // 厂直订单列表操作栏——付款
    paymentBtn (orderId, id) {
      this.operation.payment = true
      this.$axios
        .post('/api/manage/order/queryJdpOrderDataDetails', { id: id })
        .then(resp => {
          if (resp.success) {
            this.paymentDataList = resp.result.jdpTradeOrdersDetailResponse
            this.details.paymentInfoVO = this.paymentDataList.paymentInfoVO
          } else {
            this.$message.error(resp.desc)
          }
        })
    },
    /**
     * 确定取消分配
     * @param {orderId}
     */
    isSureCancel () {
      this.$axios
        .post('/api/manage/order/cancelAllocation', {
          jdOrderId: this.jdOrderId,
          id: this.relatedId,
        })
        .then(resp => {
          if (resp.success) {
            this.$message.success('取消成功')
            this.operation.unassign = false
            this.getOrderList()
          } else {
            this.$message.error(resp.desc)
          }
        })
    },
    // 查看详情window下的——查看
    lookThisOrder (id) {
      this.$router.push({ name: 'OSSFilings', params: { id: id } })
    },
    /**
     * 查看详情——复制文本
     * @param {}
     */
    copyText (id) {
      var text = document.getElementById(id)
      if (document.body.createTextRange) {
        // createTextRange是用在IE中的
        var range = document.body.createTextRange()
        range.moveToElementText(text)
        range.select()
        this.$message.success('复制成功')
      } else if (window.getSelection) {
        var selection = window.getSelection()
        var range = document.createRange()
        range.selectNodeContents(text)
        selection.removeAllRanges()
        selection.addRange(range)
        document.execCommand('Copy')
        this.$message.success('复制成功')
      } else {
        this.$message.error('复制失败')
      }
    },
    // 关联报备——添加新的报备单
    /**
     * 编辑订单
     * @param {}
     */
    editOrder (order) {
      order.edit = true
    },
    /**
     * 保存订单
     * @param {}
     */
    saveOrder (order) {
      const _this = this
      if (!order.orderId) {
        order.errorMsg = '请输入报备编号'
        _this.$message.error('请输入报备编号')
        return
      }
      if (!parseInt(order.orderId)) {
        order.errorMsg = '请输入正确的报备编号'
        _this.$message.error('请输入正确的报备编号')
        return
      }
      const array = []
      // filingIds-all   filingId-cur jdid  id
      _this.relatedOrderlist.forEach(item => {
        array.push(item.orderId)
      })

      const params = {
        id: _this.relatedId,
        jdOrderId: _this.jdOrderId,
        filingId: order.orderId,
        filingIds: array.join(','),
      }
      _this.$axios
        .post('api/manage/order/queryAuditDetail', params)
        .then(resp => {
          if (resp.success) {
            _this.$message.success('保存成功')
            order.edit = false
          } else {
            _this.$message.error(resp.desc)
          }
        })
    },
    /**
     * 删除订单
     * @param {}
     */
    removeOrder (order, index) {
      const array = []
      this.relatedOrderlist.forEach(item => {
        if (order.orderId != item.orderId) {
          array.push(item.orderId)
        }
      })
      const params = {
        id: this.relatedId,
        jdOrderId: this.jdOrderId,
        filingId: order.orderId,
        filingIds: array.join(','),
      }
      this.$confirm('确认要删除该条订单？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$axios
            .post('api/manage/order/queryAuditDetail', params)
            .then(resp => {
              if (resp.success) {
                this.$message.success('删除成功')
                this.relatedOrderlist.splice(index, 1)
              } else {
                this.$message.error(resp.desc)
              }
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
      // else this.relatedOrderlist.splice(index, 1)
    },
    // 关联报备——查看报备单
    lookRelateOrder (id) {
      console.log(id)
    },
    /**
     * 增加关联订单
     * @param {}
     */
    addOrder () {
      this.relatedOrderlist.push({
        orderId: '',
        id: '',
        edit: true,
        errorMsg: '',
      })
    },

    // 分配订单——查询
    queryResultInfo () {
      this.$axios
        .post(
          `/api/manage/serviceProviderManage/getAllFlingServiceProviderInfo?size=${this.distribute.pageInfo.pageSize}&startPage=${this.distribute.pageInfo.pageNum}`,
          {
            userId: this.distribute.search.userId,
            userName: this.distribute.search.serviceName,
            companyName: this.distribute.search.company,
            oauthPhone: this.distribute.search.serviceMobile,
          },
        )
        .then(resp => {
          if (resp.success) {
            this.distribute.pageInfo.pageTotal = resp.result.total
            this.distribute.data = resp.result.list
          } else this.$message.error(resp.desc)
        })
    },
    // 分配订单——重置
    resetQuery () {
      Object.keys(this.distribute.search).forEach(key => {
        this.distribute.search[key] = ''
      })
    },
    // 分配订单——分页操作
    sizeChange (val) {
      this.distribute.pageInfo.pageSize = val
      this.queryResultInfo()
    },
    // 分配订单——当前页
    currentChange (val) {
      this.distribute.pageInfo.pageNum = val
      this.queryResultInfo()
    },
    /**
     * 分配订单——获取已选择的账户
     * @param {}
     */
    currentOrderChange (val) {
      if (val) {
        this.distribute.currentRow = val
        this.distribute.radio = val.id
      } else {
        this.distribute.currentRow = null
        this.distribute.radio = null
      }
    },
    /**
     * 分配订单——确认分配
     * @param {}
     */
    distributeHandle () {
      if (this.distribute.currentRow) {
        if (this.bulkHandleObj.inOperation) {
          // 批量
          this.$axios
            .post('/api/manage/order/batchAllocationOrder', {
              serverUserId: this.distribute.currentRow.userId,
              serverName: this.distribute.currentRow.userName,
              serverCompanyName: this.distribute.currentRow.companyName,
              jdOrderIdList: this.bulkHandleObj.ordersArr,
            })
            .then(resp => {
              if (resp.success) {
                this.$message.success('批量分配成功')
                this.bulkHandleObj.inOperation = false
                this.bulkHandleObj.ordersArr = []
                this.operation.distributeOrder = false
                this.distribute.currentRow = null
                this.distribute.radio = null
                this.getOrderList()
              } else {
                this.$message.error(resp.desc)
              }
            })
        } else {
          this.$axios
            .post('/api/manage/order/allocationOrder', {
              id: this.relatedId,
              jdOrderId: this.jdOrderId,
              serverUserId: this.distribute.currentRow.userId,
              serverName: this.distribute.currentRow.userName,
              serverCompanyName: this.distribute.currentRow.companyName,
            })
            .then(resp => {
              if (resp.success) {
                this.$message.success('分配成功')
                this.operation.distributeOrder = false
                this.distribute.currentRow = null
                this.distribute.radio = null
                this.getOrderList()
              } else {
                this.$message.error(resp.desc)
              }
            })
        }
      } else {
        this.$message.error('请选择要分配的用户')
      }
    },
    distributeClose () {
      this.distribute.currentRow = null
      this.distribute.radio = null
      this.operation.distributeOrder = false
    },

    /**
     * 日期选择——时间补充时分秒
     * isEnd 结束时间
     */
    additionalTime (date, isEnd) {
      if (date) {
        if (isEnd) {
          date += ' 23:59:59'
        } else {
          date += ' 00:00:00'
        }
      }
      return date
    },
    /**
     * 厂直订单——导入商品单位——success
     */
    uploadSuccess (res, file) {
      if (res.success) {
        this.$message({
          type: 'success',
          message: '导入商品单位成功',
        })
      } else this.$message.error(res.desc)
    },
    /**
     * 厂直订单——下载模板
     */
    downloadFile () {
      location.replace(
        '/api/manage/order/exportTemplateExcel?fileName=导入单位模板',
      )
    },

    /**
     * @name:  商品服务费率管理
     * @param {type}
     * @return: _blank
     */
    rateSystem () {
      this.$router.push({ path: '/admin/ProductRate' })
    },

    /**
     * @name: 详情下生成SI金额
     * @param {type}
     * @return:
     */
    createSI () {
      this.$axios
        .post(`/api/manage/order/generateSiMoney/${this.jdOrderId}`)
        .then(resp => {
          if (resp.success) {
            this.getDetailData(this.jdOrderId)
            this.createSIPrice = '重新生成'
          } else {
            this.$message.error(resp.desc)
          }
        })
    },
    // 付款——提交
    submitPaymentType (id) {
      this.$axios
        .post(
          `/api/manage/order/payCommit/${id}/${this.paymentData.paymentType}`,
        )
        .then(resp => {
          if (resp.success) {
            this.operation.payment = false
            this.operation.applyPayment = true
          } else {
            this.$message.error(resp.desc)
          }
        })
    },

    clearWindow () {
      this.operation.applyPayment = false
      this.getOrderList()
    },

    // 详情-发票合同下载
    serverDownload (type) {
      location.replace(
        `/api/manage/order/contractOrIncomeDownload?jdOrderId=${this.downloadId}&check=${type}`,
      )
    },
    tableRowClassName ({ row, rowIndex }) {
      row.index = rowIndex
    },
    tableDblclick (row, column, cell, event) {
      if (column.property == 'skuUnit') {
        this.tabClickIndex = row.index
      }
    },
    skuUnitInputBlur () {
      const _item = this.details.jdPtradeOrderItems[this.tabClickIndex]
      this.$axios
        .post('/api/manage/order/saveUnit', {
          jdSkuId: _item.skuId,
          unit: _item.skuUnit,
        })
        .then(res => {
          if (res.success) {
            this.$message.success('单位修改成功')
            this.tabClickIndex = null
          } else {
            this.$message.error(res.desc)
            this.getDetailData(this.details.id)
            this.tabClickIndex = null
          }
        })
    },
    receiptDetail (orderId) {
      this.$axios
        .post('/api/manage/order/queryOrderReceiptInfo', {
          billType: 1,
          orderId: orderId,
        })
        .then(resp => {
          if (resp.success) {
            window.open(resp.result.data)
          } else {
            this.$message.error(resp.desc)
          }
        })
    },
    receiptDownload (orderId) {
      window.location.href =
        '/api/manage/order/downloadOrderReceiptInfo?billType=1&orderId=' +
        orderId
    },
  },
  mounted () {
    const _state = parseInt(this.searchData.state) || 0
    this.filterList(this.typeList[_state])
  },
}
</script>

<style lang="less" scoped>
@themeColor: #298df8;
.el-button--danger {
  background-color: #e51c23;
}
.mr20 {
  margin-right: 20px;
}
.red {
  color: #e51c23;
}
.green {
  color: #83c858;
}
.grey {
  color: #999;
}
.factoryOrder {
  // 筛选部分
  .screening-box {
    border: 1px solid #bbb;
    .form {
      width: 100%;
      .screening-head {
        background: #f5f5f5;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .toggle {
          cursor: pointer;
          margin-right: 50px;
        }
      }
      .screening-body {
        border-top: 1px solid #bbb;
        /deep/.el-form-item {
          margin-bottom: 10px;
        }
      }
    }
  }
  // table
  .tableList {
    margin-top: 24px;
    .statusBox {
      display: flex;
      align-items: center;
      .statusBtn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 130px;
        height: 30px;
        border: 1px solid #bbb;
        background: #fff;
        margin-right: 10px;
        font-size: 12px;
        box-sizing: border-box;
        cursor: pointer;
        .count {
          color: #ff2525;
        }
      }
      .statusActive {
        background: @themeColor;
        color: #fff;
        border-color: @themeColor;
        .count {
          color: #fff;
        }
      }
    }
    .tableBox {
      width: 100%;
      margin-top: 10px;
      background: #f3f3f3;
      // border: 1px solid #bbb;
      .title {
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 28px;
        border: 1px solid #bbb;
        border-bottom: none;
        .left {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .titleImg {
            display: flex;
            align-items: center;
          }
          .icon {
            display: block;
            width: 18px;
            height: 14px;
            margin-right: 10px;
          }
        }
        .right {
          width: 110px;
          height: 30px;
          line-height: 30px;
          background: @themeColor;
          color: #fff;
          font-size: 12px;
          text-align: center;
          cursor: pointer;
        }
      }
      .operateBox {
        .itemBtn {
          margin-bottom: 10px;
          cursor: pointer;
          color: @themeColor;
        }
      }
      .btnArea {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        .downloadFile {
          font-size: 13px;
          color: @themeColor;
          margin-right: 100px;
          cursor: pointer;
        }
      }
    }
  }

  // 详情
  .detailBox {
    max-height: 500px;
    overflow-y: auto;
    .orderInfo {
      margin: 10px 0;
      padding: 10px 0 10px 20px;
      border: 1px solid @themeColor;
      background: rgba(180, 180, 180, 0.14);
      .item,
      .group {
        display: flex;
      }
      .item {
        margin-bottom: 10px;
        font-weight: 600;
        font-size: 13px;
        color: #101010;
      }
      .group {
        margin-right: 30px;
        flex-shrink: 0;
        label {
          flex-shrink: 0;
        }
        span {
          display: inline-block;
          min-width: 70px;
        }
        .numList {
          display: flex;
          flex-wrap: wrap;
          p {
            margin: 0 25px 5px 0;
          }
          .lookThis {
            color: @themeColor;
            cursor: pointer;
            margin: 0 5px;
          }
        }
        &:last-child {
          flex-shrink: 1;
          margin-right: 0;
        }
      }
    }
    .createInvoice {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 20px;
      .left {
        display: flex;
        align-items: center;
        .group {
          margin-right: 40px;
          label {
            color: #101010;
            font-size: 13px;
          }
          span {
            font-size: 13px;
          }
        }
      }
      .createSiBtn {
        width: 200px;
      }
    }
    .detailTable {
      max-height: 200px;
      overflow-y: auto;
      // 表头样式修改
      /deep/th .cell {
        color: #101010;
      }
      /deep/.cell {
        font-size: 12px;
      }
    }
    .information {
      display: flex;
      border: 1px solid #bbb;
      margin-top: 10px;
      .item {
        flex: 2;
        padding: 20px;
        font-size: 13px;
        border-right: 1px solid #bbb;
        &:last-child {
          border: none;
        }
        .title {
          color: #101010;
          font-weight: 600;
        }
        .logistic {
          display: flex;
          align-items: center;
          margin-top: 15px;
          color: #101010;
          font-weight: 600;
          p {
            margin-right: 10px;
          }
        }
        .logisticInfo {
          margin-top: 15px;
          height: auto;
          max-height: 150px;
          overflow-y: auto;
          padding-left: 5px;
          line-height: 20px;
          /deep/.el-timeline {
            font-size: 13px;
          }
          /deep/.el-timeline-item {
            &:first-child {
              .el-timeline-item__content,
              .el-timeline-item__timestamp {
                color: #ff2525 !important;
              }
            }
          }
        }
        .infoItem {
          display: flex;
          align-items: baseline;
          margin-top: 10px;
          line-height: 22px;
          .text {
            max-width: 235px;
          }
        }
        .emptyLogs {
          margin-top: 20px;
          /deep/.el-timeline-item {
            &:first-child {
              .el-timeline-item__content,
              .el-timeline-item__timestamp {
                color: #ff2525 !important;
              }
            }
          }
        }
      }
    }
    .warning {
      color: #ff2b2b;
    }
    .success {
      color: #27b148;
    }
    .lastRate {
      color: #0079fe;
    }
  }
  // 分配订单
  .group {
    .el-form-item {
      margin-bottom: 10px;
    }
    .searchBtn {
      width: 90px;
      height: 30px;
      background: @themeColor;
      color: #fff;
      font-size: 12px;
      text-align: center;
      margin-left: 50px;
    }
    .resetBtn {
      background: #fff;
      color: @themeColor;
    }
  }
  .pageBox {
    margin-top: 20px;
    text-align: right;
  }
  // 关联报备
  .reportBox {
    padding: 0 20px;
    .el-input {
      width: 200px;
      margin: 0 10px;
    }
    .lastItem {
      border: 1px dotted #bbb;
      text-align: center;
      cursor: pointer;
    }
  }

  // 出库window
  .stockBox {
    padding: 0 20px;
    .tips {
      color: #ff2525;
    }
    .selectBox {
      margin-top: 20px;
      display: flex;
      align-items: center;
      .addressName {
        color: #101010;
        font-weight: bold;
      }
      .addressVal {
        flex: 2;
      }
    }
  }

  // 取消分配
  .unassignBox {
    padding: 0 20px;
    font-weight: bold;
    color: #101010;
  }
}
.orderListTable {
  font-size: 13px;
  .orderInfo {
    margin-right: 20px;
    font-size: 12px;
  }
  .productItem {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .logisticsItem {
    margin-bottom: 10px;
    text-align: center;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .image {
    max-width: 50px;
    max-height: 50px;
    margin-right: 13px;
  }
  .productName {
    color: @themeColor;
  }
  .productInfo {
    font-size: 12px;
    span {
      margin-right: 15px;
    }
  }
  .moreProduct {
    text-align: center;
    font-size: 12px;
    color: #9f9e9e;
    margin-top: 8px;
  }
  /deep/.el-table .cell.el-tooltip {
    white-space: normal !important;
  }
}
.table-handler {
  padding: 5px 15px;
  background-color: #fff;
  text-align: right;
  border: 1px solid #bbb;
  border-top: none;
}
.anticon-copy {
  margin-left: 5px;
  cursor: pointer;
}
.distributeOrderTable {
  /deep/.el-radio {
    .el-radio__label {
      display: none;
    }
  }
}
.orderStatus {
  color: #ff2525;
  &.finished {
    color: #27b148;
  }
}
/deep/.el-dialog__header {
  padding: 10px 20px 10px;
  background: @themeColor;
  .el-dialog__title {
    font-size: 14px;
    color: #fff;
  }
  .el-dialog__headerbtn {
    top: 10px;
    font-size: 20px;
    .el-dialog__close {
      color: #fff;
    }
  }
}
/deep/.el-dialog__footer {
  text-align: center;
  .el-button {
    padding: 10px 0;
    width: 120px;
  }
}
/deep/.el-table td,
/deep/.el-table th.is-leaf,
/deep/.el-table--border,
/deep/.el-table--group,
/deep/.el-table--border th.gutter:last-of-type {
  border-color: #bbb;
}
/deep/.el-table--border::after,
/deep/.el-table--group::after,
/deep/.el-table::before {
  background-color: #bbb;
}

/deep/.el-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: calc(100% - 30px);
  max-width: calc(100% - 30px);
}
/deep/.el-dialog .el-dialog__body {
  flex: 1;
  overflow: auto;
}

.paymentDialog {
  .title {
    color: #101010;
    font-weight: bold;
    margin-bottom: 20px;
  }
  .infos {
    display: flex;
    margin: 20px 0 50px;
    .item:not(:last-child) {
      margin-right: 50px;
    }
    .red {
      padding-left: 5px;
    }
  }
  .dialog-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 50px;
    .amount {
      margin-right: 80px;
    }
    .red {
      font-size: 18px;
    }
  }
}
.paymentType {
  display: flex;
  align-items: center;
  .item {
    padding: 10px 20px;
    border: 1px solid #999;
    margin: 0 25px;
    cursor: pointer;
    &.active {
      border-color: red;
      position: relative;
      &::before {
        display: block;
        content: '';
        width: 0;
        height: 0;
        border-bottom: 20px solid red;
        border-left: 20px solid transparent;
        position: absolute;
        right: 0;
        bottom: 0;
      }
      &::after {
        display: block;
        content: '';
        width: 7px;
        height: 4px;
        border: 2px solid #fff;
        border-radius: 1px;
        border-top: none;
        border-right: none;
        background: transparent;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        position: absolute;
        right: 1px;
        bottom: 4px;
      }
    }
  }
}
.applyPaymentDialog {
  /deep/.el-dialog__header {
    display: none;
  }
  .icon {
    font-size: 36px;
    color: #83c858;
  }
  .flex-row {
    display: flex;
    justify-content: center;
    align-items: center;
    &:not(:last-child) {
      margin-bottom: 30px;
    }
  }
  .info {
    font-weight: bold;
    font-size: 16px;
    padding-left: 30px;
    color: #333;
  }
  .red {
    margin-left: 50px;
  }
}
</style>
<style >
.el-table--border .has-gutter td:nth-last-of-type(2),
.el-table--border .has-gutter th:nth-last-of-type(2) {
  border-right: none;
}
.skuUnitInput input {
  padding: 0;
}
/* .paymentDialog .el-dialog__footer {
} */
</style>
